Upload.js ➔ initDropzone - Code Metrics - Inspection of "update dropzone form" - o2system/venus-form - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 2371ee...e807a0 )

unknown

created 2019-03-12 18:26 UTC

Upload.js ➔ initDropzone B

↳ Parent: Project

Complexity

Conditions	4
Paths	170

Size

Total Lines	152
Code Lines	104

Duplication

Lines	42
Ratio	27.63 %

Importance

Changes	4
Bugs	1	Features	0

Metric	Value
cc	4
eloc	104
c	4
b	1
f	0
nc	170
nop	0
dl	42
loc	152
rs	7

How to fix Long Method

/**
 * This file is part of the O2System Venus UI Framework package.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 *
 * @author         Steeve Andrian Salim
 * @copyright      Copyright (c) Steeve Andrian Salim
 */
// ------------------------------------------------------------------------

import * as $ from 'jquery';
import * as Dropzone from 'dropzone';
import 'dropify/dist/js/dropify';

/**
 * Class Upload
 *
 * @author          Teguh Rianto
 * @package         Components
 */
export default class Upload {
    constructor() {
        /**
         * Init dropzone
         */
        this.initDropzone();

        /**
         * Init dropify
         */
        this.initDropify();
    }

    initDropzone() {
        if (typeof Dropzone != 'undefined') {
<<<<<<< HEAD
            //Dropzone.autoDiscover = false;

            // Cards version
            if($('#dropzone-cards').length) {
                let dropzoneCardsElement = $('#dropzone-cards');
                let dropzoneCardsActionUrl = dropzoneCardsElement.data('action-url');

                let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
                dropzoneCardsFilePreview.removeAttr('id');

                let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
                dropzoneCardsFilePreview.parent().remove();
=======
            Dropzone.autoDiscover = false;

            // Cards version
            if($('#dropzone-cards').length) {
                let dropzoneCards = $('#dropzone-cards');
                let dropzoneCardsActionUrl = dropzoneCards.data('action-url');

                let dropzoneCardsFilePreview = dropzoneCards.find('#dropzone-cards-template');
                dropzoneCardsFilePreview.removeAttr('id');

                let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parentNode.innerHTML;
                dropzoneCardsFilePreviewTemplate.parentNode.removeChild(dropzoneCardsFilePreview);
>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f

                let dropzoneCards = $('#dropzone-cards-form').dropzone({
                    url: dropzoneCardsActionUrl,
                    autoProcessQueue: true,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneCardsFilePreviewTemplate
                });

                dropzoneCards.on("addedfile", function (file) {
<<<<<<< HEAD
                    console.log('titit');
=======
>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
                    var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
                    file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
                    file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);

                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                });

                dropzoneCards.on("success", function (file, resp) {
                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneCards.on("error", function (file) {
                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });
            }

            // Table version
            if($('#dropzone-table').length) {
<<<<<<< HEAD
                let dropzoneTableElement = $('#dropzone-table');
                let dropzoneTableActionUrl = dropzoneTableElement.data('action-url');

                let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
                dropzoneTableFilePreview.removeAttr('id');

                let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
                dropzoneTableFilePreview.parent().remove();
=======
                let dropzoneTable = $('#dropzone-table');
                let dropzoneTableActionUrl = dropzoneTable.data('action-url');

                let dropzoneTableFilePreview = dropzoneTable.find('#dropzone-table-template');
                dropzoneTableFilePreview.removeAttr('id');

                let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parentNode.innerHTML;
                dropzoneTableFilePreviewTemplate.parentNode.removeChild(dropzoneTableFilePreview);
>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f

                let dropzoneTable = $('#dropzone-table-form').dropzone({
                    url: dropzoneTableActionUrl,
                    autoProcessQueue: false,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
<<<<<<< HEAD
                    previewsContainer: ".media-list-table",
                    clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
                });
                
                dropzoneTable.on("addedfile", function (file) {
                    console.log('test');
=======
                    previewsContainer: '#dropzone-table',
                    clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
                });

                dropzoneTable.on("addedfile", function (file) {

>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                    // Hookup the start button
<<<<<<< HEAD
                    file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
=======
                    file.previewElement.querySelector(".start").onclick = function() { fileDropzone.enqueueFile(file); };
>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
                });

                dropzoneTable.on("totaluploadprogress", function(progress) {
                    document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
                });

                dropzoneTable.on("sending", function(file) {
                    // Show the total progress bar when upload starts
                    document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
                    // And disable the start button
                    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
                });

                dropzoneTable.on("success", function (file, resp) {
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneTable.on("error", function (file) {
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

<<<<<<< HEAD
                dropzoneTable.on("queuecomplete", function(progress) {
=======
                fileDropzone.on("queuecomplete", function(progress) {
>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
                    document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
                });

                // Setup the buttons for all transfers
                // The "add files" button doesn't need to be setup because the config
                // `clickable` has already been specified.
                document.querySelector("#dropzone-table-actions .start").onclick = function() {
<<<<<<< HEAD
                    dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
=======
                    dropzoneTable.enqueueFiles(fileDropzone.getFilesWithStatus(Dropzone.ADDED));
>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
                };

                document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
                    dropzoneTable.removeAllFiles(true);
                };
            }
        }
    }

    initDropify(){
        $('.dropify').dropify();
    }
}

1			/**
2			* This file is part of the O2System Venus UI Framework package.
3			*
4			* For the full copyright and license information, please view the LICENSE
5			* file that was distributed with this source code.
6			*
7			* @author Steeve Andrian Salim
8			* @copyright Copyright (c) Steeve Andrian Salim
9			*/
10			// ------------------------------------------------------------------------
11
12			import * as $ from 'jquery';
13			import * as Dropzone from 'dropzone';
14			import 'dropify/dist/js/dropify';
15
16			/**
17			* Class Upload
18			*
19			* @author Teguh Rianto
20			* @package Components
21			*/
22			export default class Upload {
23			constructor() {
24			/**
25			* Init dropzone
26			*/
27			this.initDropzone();
28
29			/**
30			* Init dropify
31			*/
32			this.initDropify();
33			}
34
35			initDropzone() {
36			if (typeof Dropzone != 'undefined') {
37			<<<<<<< HEAD
38			//Dropzone.autoDiscover = false;
39
40			// Cards version
41			if($('#dropzone-cards').length) {
42			let dropzoneCardsElement = $('#dropzone-cards');
43			let dropzoneCardsActionUrl = dropzoneCardsElement.data('action-url');
44
45			let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
46			dropzoneCardsFilePreview.removeAttr('id');
47
48			let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
49			dropzoneCardsFilePreview.parent().remove();
50			=======
51			Dropzone.autoDiscover = false;
52
53			// Cards version
54			if($('#dropzone-cards').length) {
55			let dropzoneCards = $('#dropzone-cards');
56			let dropzoneCardsActionUrl = dropzoneCards.data('action-url');
57
58			let dropzoneCardsFilePreview = dropzoneCards.find('#dropzone-cards-template');
59			dropzoneCardsFilePreview.removeAttr('id');
60
61			let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parentNode.innerHTML;
62			dropzoneCardsFilePreviewTemplate.parentNode.removeChild(dropzoneCardsFilePreview);
63			>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
64
65			let dropzoneCards = $('#dropzone-cards-form').dropzone({
66			url: dropzoneCardsActionUrl,
67			autoProcessQueue: true,
68			thumbnailWidth: null,
69			thumbnailHeight: null,
70			previewTemplate: dropzoneCardsFilePreviewTemplate
71			});
72
73			dropzoneCards.on("addedfile", function (file) {
74			<<<<<<< HEAD
75			console.log('titit');
76			=======
77			>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
78			var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
79			file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
80			file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);
81
82			var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
83			if (imagesFileTypes.indexOf(file.type) != -1) {
84			file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
85			} else if (file.type === 'application/pdf') {
86			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
87			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
88			} else if (file.type === 'application/doc' \| 'application/docx') {
89			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
90			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
91			} else if (file.type === 'application/ppt' \| 'application/pptx') {
92			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
93			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
94			} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
95			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
96			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
97			} else if (file.type === 'audio/mpeg') {
98			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
99			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
100			} else {
101			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
102			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
103			}
104			});
105
106			dropzoneCards.on("success", function (file, resp) {
107			file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
108			file.previewElement.querySelector(".upload-progress").style.display = 'none';
109			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
110			});
111
112			dropzoneCards.on("error", function (file) {
113			file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
114			file.previewElement.querySelector(".upload-progress").style.display = 'none';
115			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
116			});
117			}
118
119			// Table version
120			if($('#dropzone-table').length) {
121			<<<<<<< HEAD
122			let dropzoneTableElement = $('#dropzone-table');
123			let dropzoneTableActionUrl = dropzoneTableElement.data('action-url');
124
125			let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
126			dropzoneTableFilePreview.removeAttr('id');
127
128			let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
129			dropzoneTableFilePreview.parent().remove();
130			=======
131			let dropzoneTable = $('#dropzone-table');
132			let dropzoneTableActionUrl = dropzoneTable.data('action-url');
133
134			let dropzoneTableFilePreview = dropzoneTable.find('#dropzone-table-template');
135			dropzoneTableFilePreview.removeAttr('id');
136
137			let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parentNode.innerHTML;
138			dropzoneTableFilePreviewTemplate.parentNode.removeChild(dropzoneTableFilePreview);
139			>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
140
141			let dropzoneTable = $('#dropzone-table-form').dropzone({
142			url: dropzoneTableActionUrl,
143			autoProcessQueue: false,
144			thumbnailWidth: null,
145			thumbnailHeight: null,
146			previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
147			<<<<<<< HEAD
148			previewsContainer: ".media-list-table",
149			clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
150			});
151
152			dropzoneTable.on("addedfile", function (file) {
153			console.log('test');
154			=======
155			previewsContainer: '#dropzone-table',
156			clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
157			});
158
159			dropzoneTable.on("addedfile", function (file) {
160
161			>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
162			var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
163			if (imagesFileTypes.indexOf(file.type) != -1) {
164			file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
165			} else if (file.type === 'application/pdf') {
166			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
167			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
168			} else if (file.type === 'application/doc' \| 'application/docx') {
169			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
170			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
171			} else if (file.type === 'application/ppt' \| 'application/pptx') {
172			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
173			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
174			} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
175			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
176			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
177			} else if (file.type === 'audio/mpeg') {
178			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
179			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
180			} else {
181			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
182			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
183			}
184			// Hookup the start button
185			<<<<<<< HEAD
186			file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
187			=======
188			file.previewElement.querySelector(".start").onclick = function() { fileDropzone.enqueueFile(file); };
189			>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
190			});
191
192			dropzoneTable.on("totaluploadprogress", function(progress) {
193			document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
194			});
195
196			dropzoneTable.on("sending", function(file) {
197			// Show the total progress bar when upload starts
198			document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
199			// And disable the start button
200			file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
201			});
202
203			dropzoneTable.on("success", function (file, resp) {
204			file.previewElement.querySelector(".upload-progress").style.display = 'none';
205			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
206			});
207
208			dropzoneTable.on("error", function (file) {
209			file.previewElement.querySelector(".upload-progress").style.display = 'none';
210			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
211			});
212
213			<<<<<<< HEAD
214			dropzoneTable.on("queuecomplete", function(progress) {
215			=======
216			fileDropzone.on("queuecomplete", function(progress) {
217			>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
218			document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
219			});
220
221			// Setup the buttons for all transfers
222			// The "add files" button doesn't need to be setup because the config
223			// `clickable` has already been specified.
224			document.querySelector("#dropzone-table-actions .start").onclick = function() {
225			<<<<<<< HEAD
226			dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
227			=======
228			dropzoneTable.enqueueFiles(fileDropzone.getFilesWithStatus(Dropzone.ADDED));
229			>>>>>>> 2371ee75f3cf9644047d1d2ad97654b7d05bd53f
230			};
231
232			document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
233			dropzoneTable.removeAllFiles(true);
234			};
235			}
236			}
237			}
238
239			initDropify(){
240			$('.dropify').dropify();
241			}
242			}

o2system / venus-form

GitHub Access Token became invalid

Push — master ( 2371ee...e807a0 )

Upload.js ➔ initDropzone B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like